
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地区查询</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
    <style>
        :root{
            font-size: 15px;
        }
        body{
            padding-top: 15px;
        }


    </style>
</head>
<body>
    
    <div class="container">
        <form id="editForm" class="row">
            <!-- 输入省份名字 -->
             <div class="mb-3 col">
                <label class="form-label">省份名字</label>
                <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称">
             </div>
             <!-- 输入城市名字 -->
             <div class="mb-3 col">
                <label class="form-label">城市名字</label>
                <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称">
             </div>

        </form>
        <button type="button" class="btn btn-primary sel-btn">查询</button>
        <br><br>
        <p>地区列表：</p>
        <ul class="list-group">
            <li class="list-group-item">东城区</li>
        </ul>


    </div>



    <script>
         /**
         * 目标: 根据省份和城市名字, 查询对应的地区列表
         */
        // 1. 查询按钮-点击事件
        document.querySelector(".sel-btn").addEventListener("click",function () {
            // 2:获取输入的省份及城市名
            const pname = document.querySelector('.province').value
            const cname = document.querySelector('.city').value

            // 3:查询参数的字符串
            const  qObj = {
                pname,
                cname
            }
            console.log(qObj);
            
            // 查询参数对象转换为查询参数字符串
            // const  paramsObj = new URLSearchParams(qObj)
            // console.log(paramsObj);
            
            // const  queryString = paramsObj.toString()
            // console.log(queryString);


             // 4. 使用XHR对象，查询地区列表
             const  xhr = new XMLHttpRequest()

            // xhr.open("get",`http://hmajax.itheima.net/api/area?${queryString}`)
            xhr.open("get",`http://hmajax.itheima.net/api/area?pname=${pname}&cname=${cname}`)

            xhr.addEventListener("loadend",function () {
                console.log(xhr.response);
                const data = JSON.parse(xhr.response)
                
                const htmlStr = data.list.map( (areaName)=>{
                    return  `<li class="list-group-item">${areaName}</li>`
                }).join("")

                console.log(htmlStr);

                document.querySelector(".list-group").innerHTML = htmlStr
                
            })

            xhr.send()


            
        })


    </script>
</body>
</html>